<template>
  <div class="analysis_main">
    <div class="analysis_header">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="dateBox flex-start">
            <img src="@/assets/img/icon/icon_1.png" />
            <span><strong>￥{{detailData.contractAmountYTD}}</strong>本年合同总金额（万元）</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="dateBox flex-start">
            <img src="@/assets/img/icon/icon_2.png" />
            <span><strong>￥{{detailData.costAmountYTD}}</strong>本年成本支出（万元）</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="dateBox flex-start">
            <img src="@/assets/img/icon/icon_3.png" />
            <span><strong>￥{{detailData.receivedAmountYTD}}</strong>本年回款总金额（万元）</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="dateBox flex-start">
            <img src="@/assets/img/icon/icon_4.png" />
            <span><strong>{{detailData.receivedRateYTD}} %</strong>本年回款率（%）</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="analysis_nav dateBox">
      <el-row :gutter="20" class="flex-center">
        <el-col :span="3">
          <router-link to='/Cluemanagement'>
            <img src="@/assets/img/icon/icon1.png" /><span>线索管理</span>
          </router-link>
        </el-col>
        <el-col :span="3">
          <router-link to='/Opportunities'>
            <img src="@/assets/img/icon/icon2.png" /><span>商机管理</span>
          </router-link>
        </el-col>
        <el-col :span="3">
          <router-link to='/Administration'>
            <img src="@/assets/img/icon/icon3.png" /><span>项目管理</span>
          </router-link>
        </el-col>
        <el-col :span="3">
          <router-link to='/main/formMessage'>
            <img src="@/assets/img/icon/icon4.png" /><span>抄送信息</span>
          </router-link>
        </el-col>
        <el-col :span="3">
          <router-link to='/AttendanceStatistics'>
            <img src="@/assets/img/icon/icon5.png" /><span>考勤统计</span>
          </router-link>
        </el-col>
        <el-col :span="3">
          <img src="@/assets/img/icon/icon6.png" /><span>行政审批</span>
        </el-col>
        <el-col :span="3">
          <img src="@/assets/img/icon/icon7.png" /><span>公告发布</span>
        </el-col>
        <el-col :span="3">
          <img src="@/assets/img/icon/icon8.png" /><span>知识库管理</span>
        </el-col>
      </el-row>
    </div>
    <div class="analysisox">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="dateBox">
            <h4>施工进度</h4>
            <div class="businesstype">
              <el-form :inline="true" size="mini" label-position="right">
                <el-form-item>
                  <el-select v-model="deptNumber" clearable placeholder="请选择" @change="deptNumberChange">
                    <el-option label="全过程咨询事业部" value="3"></el-option>
                    <el-option label="招标采购事业部" value="1"></el-option>
                    <el-option label="环境咨询事业部" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <AcrossLineChart ref="AcrossLineChart" class="dateBox-Chart"></AcrossLineChart>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="dateBox">
            <h4>项目收支情况</h4>
            <div class="businesstype">
              <el-form :inline="true" size="mini" label-position="right">
                <el-form-item>
                  <el-select v-model="deptNumber2" clearable placeholder="请选择" @change="deptNumberChange2">
                    <el-option label="全过程咨询事业部" value="3"></el-option>
                    <el-option label="招标采购事业部" value="1"></el-option>
                    <el-option label="环境咨询事业部" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <sxAcrosssLineChart ref="sxAcrosssLineChart" class="dateBox-Chart"></sxAcrosssLineChart>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="dateBox">
            <b @click="dataListbtn">更多></b>
            <el-tabs v-model="activeName">
              <el-tab-pane label="待办事项" name="first">
                <el-row :gutter="20">
                  <el-col :span="12" v-for="(item, index) in dataList" :key="index">
                    <div class="completed" :class="item.flowStatusName==='审批中'?'warning':''" @click="RuntimeonSubmit(item)">
                      <h4>{{item.processDefinitionName.length>9?item.processDefinitionName.slice(0,9)+'...':item.processDefinitionName}}</h4>
                      <span>发布时间：{{item.processInstanceStartTime}}  </span>
                      <em>{{item.flowStatusName}}</em>
                    </div>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="已办事项" name="second">
                <el-row :gutter="20">
                  <el-col :span="12" v-for="(item, index) in ApprovedTasklist" :key="index">
                    <div class="completed" @click="onTaskDetail(item)"><!-- warning -->
                      <h4>{{item.processDefinitionName.length>9?item.processDefinitionName.slice(0,9)+'...':item.processDefinitionName}}</h4>
                      <span>发布时间：{{item.createTime}}  </span>
                      <em>{{item.flowStatusName}}</em>
                    </div>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="dateBox">
            <h4>公司公告</h4><b>更多></b>
            <ul>
              <li>
                <span>2021-12-12</span>
                <span>【 博鳌“全过程咨询项目管理”培训活动圆满成功 】  ——   0月28日，公司邀请河北省建筑市</span>
              </li>
              <li>
                <span>2021-12-12</span>
                <span>【 博鳌“全过程咨询项目管理”培训活动圆满成功 】  ——   0月28日，公司邀请河北省建筑市</span>
              </li>
              <li>
                <span>2021-12-12</span>
                <span>【 博鳌“全过程咨询项目管理”培训活动圆满成功 】  ——   0月28日，公司邀请河北省建筑市</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import AcrossLineChart from './components/acrossLineChart.vue'
import sxAcrosssLineChart from './components/sxacrossLineChart.vue'
// import LineEchart from './components/LineEchart.vue'
import { Administration } from '@/api/projectAdministration.js';
import { FlowOperationController } from '@/api/flowController.js';
import { SysDeptController } from '@/api';
import { getObjectFromSessionStorage } from '@/utils';
export default {
  components: { AcrossLineChart, sxAcrosssLineChart },
  data () {
    return {
      activeName: 'first',
      dropdownList: [],
      deptNumber: '',
      deptNumber2: '',
      dataList: [],
      ApprovedTasklist: [],
      detailData: {
        contractAmountYTD: 0,
        costAmountYTD: 0,
        receivedAmountYTD: 0,
        receivedRateYTD: 0
      },
      flowTypelist: [
        {type: 1, name: '项目', pathurl: '/ProjectsExamine'},
        {type: 2, name: '合同', pathurl: '/ContractsExamine'},
        {type: 3, name: '商机任务', pathurl: '/CommercialExamine'},
        {type: 4, name: '项目任务', pathurl: '/ProjectsTasksExamine'},
        {type: 5, name: '合同任务', pathurl: '/ContractsTasksExamine'},
        {type: 6, name: '项目计划变更', pathurl: '/PlanChange'},
        {type: 7, name: '商机', pathurl: '/OpportunitiesExamine'}
      ]
    }
  },
  mounted () {
    this.loadTaskData()
    this.loadApprovedTask()
    this.loadDeptmentDropdownList()
    this.getIncomeAndExpense()
    this.getProgress()
    this.gethomePageAmount()
  },
  activated () {
    this.loadTaskData()
    this.loadApprovedTask()
    this.loadDeptmentDropdownList()
    this.getIncomeAndExpense()
    this.getProgress()
    this.gethomePageAmount()
  },
  methods: {
    /**
     * 所属部门下拉数据获取函数
     */
    loadDeptmentDropdownList () {
      return new Promise((resolve, reject) => {
        let params = {};
        SysDeptController.list(this, params).then(res => {
          this.dropdownList = res.data.dataList;
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 待办事项
    loadTaskData () {
      let params = {
        orderParam: [{fieldName: 'entryId', asc: 1}],
        pageParam: {pageNum: 1, pageSize: 2}
      }
      return new Promise((resolve, reject) => {
        FlowOperationController.listRuntimeTask(this, params).then(res => {
          this.dataList = res.data.dataList
        }).catch(e => {
          reject(e);
        });
      });
    },
    RuntimeonSubmit (row) {
      let flowType = this.flowTypelist.find((item, index) => {
        return row.businessFlowType === item.type
      })
      if (flowType) {
        let userInfo = getObjectFromSessionStorage('userInfo')
        if (userInfo.loginName === row.processInstanceInitiator && row.taskName.indexOf('申请人') > -1) {
          flowType.method(row.businessKey)
        } else {
          this.$router.push({
            path: flowType.pathurl,
            query: {
              businessKey: row.businessKey,
              taskId: row.taskId,
              processInstanceId: row.processInstanceId
            }
          })
        }
      } else {
        let params = {
          processInstanceId: row.processInstanceId,
          processDefinitionId: row.processDefinitionId,
          taskId: row.taskId
        }

        FlowOperationController.viewRuntimeTaskInfo(this, params).then(res => {
          if (res.data) {
            this.$router.push({
              name: res.data.routerName || 'handlerFlowTask',
              query: {
                isRuntime: true,
                taskId: row.taskId,
                processDefinitionKey: row.processDefinitionKey,
                processInstanceId: row.processInstanceId,
                processDefinitionId: row.processDefinitionId,
                formId: res.data.formId,
                routerName: res.data.routerName,
                readOnly: res.data.readOnly,
                taskName: row.taskName,
                flowEntryName: row.processDefinitionName,
                processInstanceInitiator: row.processInstanceInitiator,
                // 过滤掉加签操作，加签只有在已完成任务里可以操作
                operationList: (res.data.operationList || []).filter(item => item.type !== this.SysFlowTaskOperationType.CO_SIGN),
                variableList: res.data.variableList
              }
            });
          }
        }).catch(e => {});
      }
    },
    // 已办事项
    loadApprovedTask () {
      let params = {
        pageParam: {pageNum: 1, pageSize: 2}
      }
      return new Promise((resolve, reject) => {
        FlowOperationController.listHistoricTask(this, params).then(res => {
          this.ApprovedTasklist = res.data.dataList
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 详情
     */
    onTaskDetail (row) {
      let flowType = this.flowTypelist.find((item, index) => {
        return row.businessFlowType === item.type
      })
      if (flowType) {
        this.$router.push({
          path: flowType.pathurl,
          query: {
            businessKey: row.businessKey,
            taskId: row.taskId,
            taskdetail: 'detail'
          }
        })
      } else {
        let params = {
          taskId: row.id,
          processDefinitionId: row.processDefinitionId,
          processInstanceId: row.processInstanceId
        }

        FlowOperationController.viewHistoricTaskInfo(this, params).then(res => {
          this.$router.push({
            name: res.data.routerName || 'handlerFlowTask',
            query: {
              processDefinitionKey: row.processDefinitionKey,
              taskId: row.id,
              processInstanceId: row.processInstanceId,
              processDefinitionId: row.processDefinitionId,
              formId: (row.formInfo || {}).formId,
              routerName: row.routerName,
              readOnly: true,
              flowEntryName: row.processDefinitionName,
              processInstanceInitiator: row.processInstanceInitiator,
              operationList: res.data.operationList.filter(item => item.type === this.SysFlowTaskOperationType.CO_SIGN)
            }
          });
        }).then(res => {});
      }
    },
    // 待办、已办事项更多跳转
    dataListbtn () {
      if (this.activeName === 'first') {
        this.$router.push('/main/formMyTask')
      } else {
        this.$router.push('/main/formMyApprovedTask')
      }
    },
    deptNumberChange () {
      this.getProgress()
    },
    deptNumberChange2 () {
      this.getIncomeAndExpense()
    },
    // 首页金额统计
    gethomePageAmount () {
      return new Promise((resolve, reject) => {
        Administration.homePageAmount(this).then(res => {
          this.detailData = res.data
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 施工进度
    getProgress () {
      let params = {
        deptNumber: this.deptNumber
      }
      return new Promise((resolve, reject) => {
        Administration.Progress(this, params).then(res => {
          this.$nextTick(() => {
            this.$refs.AcrossLineChart.initChart(res.data)
          })
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 项目收支
    getIncomeAndExpense () {
      let params = {
        deptNumber: this.deptNumber2
      }
      return new Promise((resolve, reject) => {
        Administration.IncomeAndExpense(this, params).then(res => {
          this.$nextTick(() => {
            this.$refs.sxAcrosssLineChart.initChart(res.data)
          })
        }).catch(e => {
          reject(e);
        });
      });
    }
  }
}
</script>

<style scoped>
  >>> .el-collapse {
    border: none;
  }

  >>> .el-divider--horizontal {
    margin: 0px;
  }
  >>> .el-tag {
    padding: 0px 30px;
  }
</style>

<style lang="scss" scoped>
  @import '@/assets/style/element-variables.scss';
  .flex-between {display: flex;justify-content: space-between;align-items: center;}
  .flex-start {display: flex;justify-content: flex-start;align-items: center;}
  .flex-center {display: flex;justify-content:center;align-items: center;}
  .flex-wrap{display: flex;flex-wrap: wrap;}
  .flex-justify{display: flex;justify-content:center;}
  .flex-sbetween {display: flex;justify-content: space-between;}
  .analysis_main{background-color: transparent !important;padding: 0 !important;
    .main-top{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .top-item{
        width: 25%;
        padding:0 10px;
        .top-item-content{
          background: #FFFFFF;
          border-radius: 10px;
          padding: 20px;
          margin: 10px 0;
          position: relative;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
      }
    }
  }
  .dateBox{
    background: #FFFFFF;border-radius: 10px;padding: 20px;margin: 10px 0;position: relative;
    span{font-size: 12px;color: #909399;}
    strong{display: block;font-size: 18px;color: #303133;}
    a{text-decoration-line: none;}
    .color-text-1{color: #409EFF;}
    .color-text-2{color: #F56C6C;}
    .color-text-3{color: #67C23A;}
    .color-text-4{color: #E6A23C;}
    .dateBox-Chart{height: 300px !important;}
    h4{padding: 0;margin: 0;}
    b{position: absolute;right: 20px;top: 10px;color: #558CFF;font-weight: normal;cursor: pointer;z-index: 10;}
    /deep/.el-tabs__nav-wrap::after{display: none;}
    /deep/.el-tabs__item{padding-bottom: 5px;height: auto;line-height: inherit;}
    ul{
      padding: 0;margin: 10px 0;
      li{
        line-height: 24px;font-size: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;position: relative;padding-left: 10px;
        span{color: #303133;margin-right: 10px;}
      }
      li::after{content: '';width: 5px;height: 5px;border-radius: 100%;position: absolute;left: 0;top: 10px;background: #303133;}
    }
    .businesstype{position: absolute;right: 5px;z-index: 10;}
  }
  .analysis_nav{
    span{display: block;}
    .el-col{text-align: center;}
  }
  .completed{
    background: #ECF5FF;border-left: 5px solid #79BBFF;border-radius: 5px;overflow: hidden;position: relative;padding: 10px;line-height: 24px;cursor: pointer;
    em{font-style: normal;position: absolute;right: 10px;top: 10px;background: #409EFF;border-radius: 20px;color: #FFFFFF;padding: 0 8px;font-size: 12px;}
  }
  .completed.warning{
    background: #FDF6EC;border-left: 5px solid #F0C78A;
    em{background: #E6A23C;}
  }
  .analysisox{
    .dateBox{padding: 10px 20px;}
  }
  .analysis_header{
    img{margin-right: 20px;}
  }
</style>
